<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ include file="../perEvaluationResult/importhead.jsp" %>
<%@ page import = "model.*"%>
<%
	request.setCharacterEncoding("utf-8");
	String schoolname = request.getParameter("schoolname");
	String schoolid=request.getParameter("schoolid");
	String checktime = request.getParameter("checktime");
	int checktypeid = Integer.parseInt(request.getParameter("checktypeid"));
	TSchool school = DAOFactory.getSchoolDAO().getTSchool(schoolid);
%>
	<meta charset="utf-8">
	<title>学校MHT维度分析统计结果</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../layui/css/layui.css" media="all">
	<style>
		html,body{
			height: 100%;
			margin: 0px;
			padding: 0px;
			overflow: hidden;
		}
		.classMHTLayer-top{
			height: 10%;
			line-height:10%;
			margin: 5px;
			border: 1px solid #BED5F3;
		}
		.classMHTLayer-top ul li{
			list-style: none;
			float: left;
			margin-left: 15px;
			margin-top: 10px;
			border-radius: 3px;
		}
		.classMHTLayer-top ul li button{
			background-color: #F8F8F8;
			border: 1px solid #BED5F3 !important;
		}
		.classMHTLayer-con{
			height: 80%;
			margin: 5px;
		}
		.classMHTLayer-con .left .top,.right .top{
			position: relative;
			padding-left: 10px;
			color: #183152;
			font-weight: bold;
			height: 35px;
			line-height: 35px;
			background: #E5EFFE;
			overflow: hidden;
		}
		.classMHTLayer-con .left{
			height: 100%;
			width: 49%;
			float: left;
			border: 1px solid #BED5F3;
		}
		.classMHTLayer-con .right{
			height: 100%;
			width: 50%;
			float: right;
			border: 1px solid #BED5F3;
		}
	</style>
</head>
<body> 
	<div class="classMHTLayer-top">
		<ul>
			<li><button id="wqxE" class="layui-btn layui-btn-sm layui-btn-primary">外倾性(E)</button></li>
			<li><button id="sjzN" class="layui-btn layui-btn-sm layui-btn-primary">神经质(N)</button></li>
			<li><button id="jszP" class="layui-btn layui-btn-sm layui-btn-primary">精神质(P)</button></li>
			<li><button id="ysxL" class="layui-btn layui-btn-sm layui-btn-primary">掩饰性(L)</button></li>
		</ul>
	</div>
	<div class="classMHTLayer-con">
		<div class="left">
			<div class="top">
				<span><%=school.getSchoolName()%><%=checktime%>测评统计报告</span>
			</div>
			<table class="layui-hide" id="tabclassMHTresult" lay-filter="tabclassMHTresult"></table>
		</div>
		<div class="right">
			<div class="top" style="margin-bottom:6px"></div>
			<div id="echarts" style="width: 550px;height:300px; backgroud:red"></div>
		</div>
	</div>
	
	<!-- <div id="layout1">      
       <div position="center" title="昆明云铜中学2018-05-02 00:00:00.0测评统计报告">
           <form>
                <div id="maingrid4" style="margin:0; padding:0"></div>
            </form>
        </div>
        <div position="right">
        	<div id="echarts" style="width: 650px;height:300px; backgroud:red"></div>
        </div> 
 		<div position="top">
 			<table>
            	<tr>
            		<td class="tdsp"><input  class="userbtn" value="外倾性(E)" type="button" onclick="wqxE()" /></td>
            		<td class="tdsp"><input  class="userbtn" value="神经质(N)" type="button" onclick="sjzN()" /></td></td>
            		<td class="tdsp"><input  class="userbtn" value="精神质(P)" type="button" onclick="jszP()" /></td></td>
            		<td class="tdsp"><input  class="userbtn" value="掩饰性(L)" type="button" onclick="ysxL()" /></td></td>
            	</tr>
            </table>
 		</div>
   </div> -->
   
   <script src="../js/jquery-3.3.1.js"></script>
   <script type="text/javascript" src="../lib/echarts.common.min.js"></script>
   <script src="../layui/layui.js"></script>
   <script src="../lib/jquery.cookie.js"></script>
   <script src="../lib/json2.js"></script>
   <script type="text/javascript">
   layui.use(['form','table'], function(){
   		var form = layui.form;
		var table = layui.table;
   
		var queryCondtion = "";  //请求检索条件
    	//初始值
    	queryCondition = "checktypeid=<%=checktypeid%>";
		queryCondition+= "&itemname=外倾性（E）";
		queryCondition+= "&schoolid=<%=schoolid%>";
		queryCondition+= "&checktime=<%=checktime%>";
		var chartTitle = "外倾性（E）";
		
		var myChart1;
		var option1;
         
		/*列表区结构设置结束*/
		queryGridDate();
				
	    //下面是图表的生成
        // 基于准备好的dom，初始化echarts实例
        myChart1 = echarts.init(document.getElementById('echarts'));

        // 指定图表的配置项和数据
        option1 = {
		    title : {
		        text: '外倾性（E）',
		       
		        x:'center'
		    },
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    },
		    legend: {
		        orient: 'vertical',
		        x: 'right',
		        data: []
		    },
		    series : [
		        {
		            name: '访问来源',
		            type: 'pie',
		            radius : '55%',
		            center: ['50%', '60%'],
		            data:[],
		            itemStyle: {
		                emphasis: {
		                    shadowBlur: 10,
		                    shadowOffsetX: 0,
		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
		                }
		            }
		        }
		    ],
		    animation:false
		};


	   // 使用刚指定的配置项和数据显示图表。
	   myChart1.setOption(option1);  
       
       //根据用户输入条件查询数据
	   function queryGridDate(){
			table.render({
				elem: '#tabclassMHTresult',
				url: "../sysevaluationresult/getschoolepqstatistable?" + queryCondition,
				title: '学校测评结果统计分析报告EPQ',
				skin: 'line',
				even: true,
				page: {
					layout: ['count',],
					groups: 5,
					limit:20,
					theme: '#1E9FFF'
				},
				cols: [
					[{
						type: 'numbers',
						title: '序号'
					}, {
						field: 'itemname',
						title: '维度',
						align: "center"
					}, {
						field: 'status',
						title: '程度分级',
						align: "center"
					}, {
						field: 'personcounter',
						title: '分之人数',
						align: "center"
					}, {
						field: 'checknumber',
						title: '测评总人数',
						align: "center"
					}, {
						field: 'rate',
						title: '比例',
						align: "center"
					}]
				]
			}); 
				
			//通过异步请求action实现数据的保存
	         $.post("../sysevaluationresult/getschoolepqstatischart?"+queryCondition, null, function(data, status){ 
		         myChart1.setOption({
		         		title : {
				        text: chartTitle,
				       
				        x:'center'
				    },
			         	 legend: {
				        data: data.categories
				    },
				    series : [
				        {
				            data: data.values
				        }
				    ]
		         })
			 },"json"); 
		}
        
       $("#wqxE").click(function(){
			
			chartTitle="外倾性（E）";
	      	queryCondition = "checktypeid=<%=checktypeid%>";
			queryCondition+= "&itemname=外倾性（E）";
			queryCondition+="&schoolid=<%=schoolid%>"; 
			queryCondition+= "&checktime=<%=checktime%>";
			queryGridDate();
		});
		
		$("#sjzN").click(function(){
			chartTitle="神经质（N）";
	      	queryCondition = "checktypeid=<%=checktypeid%>";
			queryCondition+= "&itemname=神经质（N）";
			queryCondition+="&schoolid=<%=schoolid%>"; 
			queryCondition+= "&checktime=<%=checktime%>"; 
			queryGridDate();
		});
		
		$("#jszP").click(function(){
			chartTitle="精神质（P）";
	       	queryCondition = "checktypeid=<%=checktypeid%>";
			queryCondition+= "&itemname=精神质（P）";
			queryCondition+="&schoolid=<%=schoolid%>"; 
			queryCondition+= "&checktime=<%=checktime%>";
			queryGridDate();
		});
		
		$("#ysxL").click(function(){
			chartTitle="掩饰性（L）";
	       	queryCondition = "checktypeid=<%=checktypeid%>";
			queryCondition+= "&itemname=掩饰性（L）";
			queryCondition+="&schoolid=<%=schoolid%>"; 
			queryCondition+= "&checktime=<%=checktime%>";
			queryGridDate();
		});
		
	});
    </script>  
</body>
</html>
    